//创建外壳组件
import React, { Component } from 'react'
import Footer from './components/footer/Footer'
import Header from './components/header/Header.jsx'
import List from './components/list/List'
import './App.css'

export default class App extends Component {
    //初始化状态
	state = {todos:[
		{id:'001',name:'吃饭',done:true},
		{id:'002',name:'睡觉',done:true},
		{id:'003',name:'打代码',done:false},
		{id:'004',name:'逛街',done:false}
	]}
    //添加addTodo
    addTodo =(objTodo)=>{
        //解构赋值
        const {todos}=this.state
        //吧新添加的加到旧的里面变成新的
        const newTodos=[objTodo,...todos]
        //覆盖原来的
        this.setState({todos:newTodos})
    }
    //修改状态
    updatedoto=(id,done)=>{
    //解构赋值
    const {todos}=this.state
    const newTodos=todos.map((todo)=>{
       if(todo.id===id)
       return {...todo,done}
       else return todo
       
    })
    this.setState({todos:newTodos})
    }
    //删除todo
    deltodo=(id)=>{
        //解构赋值
        const {todos}=this.state
        const newTodos=todos.filter((todo)=>{
            return todo.id!==id
        })
        //更新状态
		this.setState({todos:newTodos})
    }
    //全选
    checkAllTodo=(done)=>{
     //获取原来的todos
		const {todos} = this.state
        const newTodos=todos.map((todo)=>{
          return {...todo,done}
        })
        //更新状态
		this.setState({todos:newTodos})
    }
    //清除已完成
    clearAllDone=()=>{
        //获取原来的todos
		const {todos} = this.state
        const newTodos=todos.filter((todo)=>{
            //console.log(todo.id,!todo.done)可以得出filter函数返回true是不过滤false过滤
           return !todo.done
        })
        //更新状态
		this.setState({todos:newTodos})
    }
    render() {
        const {todos} = this.state
        return (
            <div className='todo-container'>
                <div className='todo-wrap'>
                <Header addTodo={this.addTodo}/>
                <List todos={todos} deltodo={this.deltodo} updatedoto={this.updatedoto}/>
                <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}></Footer>
                </div>
            </div>
        )
    }
}
